<template>
	<div class="app-container">
		<div class="content">
		
			
			
			<div class="search">
				<div class="searchone"><span>出单时间：</span>
					<el-date-picker class='wd230' size="mini" value-format='yyyy-MM-dd' v-model="time1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				</div>
				<div class="searchone"><span>保险公司：</span>
					<el-select class="inputwidth" v-model="InsurancesId" placeholder="请选择" size="mini"  @change='getInsuranceStaff'>
						<el-option-group v-for="group in Insurancelist" :key="group.letter" :label="group.letter">
							<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id"></el-option>
						</el-option-group>
					</el-select>
				</div>
				<div class="searchone"><span>出单工号：</span>
					<el-select class="inputwidth" v-model="StaffId" placeholder="请选择" size="mini">
						<el-option v-for="item in InsuranceStafflist" :key="item.id" :label="item.staffAccount" :value="item.id"></el-option>
					</el-select>
				</div>
				<div class="searchone">
					<span>组织机构：</span>
					<ztree-select class="inputwidth" v-model="OrganizationUnitId" :treedata="treeData" :childprops="childprops" @change='setSelectedId'></ztree-select>

				</div>
				<div class="">
					<el-button size="mini" type='primary' @click='searchList' style="width:80px;">搜索</el-button>
				</div>
				
			</div>
			<div class="cenVal">
		        <el-dropdown @command="handleCommand">
		          <span class="el-dropdown-link">
		            {{allSelect}}
		            <i class="el-icon-arrow-down el-icon--right"></i>
		          </span>
		          <el-dropdown-menu slot="dropdown">
		            <el-dropdown-item command="1">总保费（万元）</el-dropdown-item>
		            <el-dropdown-item command="2">总收入（万元）</el-dropdown-item>
		            <el-dropdown-item command="3">总支出（万元）</el-dropdown-item>
		            <el-dropdown-item command="4">利润（万元）</el-dropdown-item>
		            <el-dropdown-item command="5">利润率（百分比）</el-dropdown-item>
		           
		          </el-dropdown-menu>
		        </el-dropdown>
		      </div>
			<div class="tables">
				<div class="tablein pday-table">
					<!--colspan rowspan -->
					<el-table :data="tableData" header-align="left" type="index" v-loading="loadinging" stripe  style="width: 100%">
							<el-table-column  align="center" label="组织机构" prop="a1" width="130" fixed :render-header="renderHeader"></el-table-column>
							
							<el-table-column align="center" label="合计" class="borders">
								<el-table-column align="center" label="总量" prop="a2" style="border-left:1px solid white;"></el-table-column>
								<el-table-column align="center" label="交强险" prop="a3"></el-table-column>
								<el-table-column align="center" label="商业险"></el-table-column>
							</el-table-column>
							<el-table-column align="center" label="总费用（万元）">
								<el-table-column align="center" :label="allSelect"></el-table-column>
							</el-table-column>
							<el-table-column align="center" label="交强险保费（万元）">
								<el-table-column align="center" :label="allSelect"></el-table-column>
							</el-table-column>
							<el-table-column align="center" label="商业险保费（万元）">
								<el-table-column align="center" :label="allSelect"></el-table-column>
							</el-table-column>
							<el-table-column align="center" label="车船税费用（万元）">
								<el-table-column align="center" :label="allSelect"></el-table-column>
							</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import ztreeSelect from "@/components/z-select/index.vue";
	
	export default {
		components: {
		    ztreeSelect
		  
		  },
		data() {
			return {
				tableData: [
					{
						a1:1,
						a2:2,
						a3:3,
						a4:4,
						a5:4,
						a6:4,
						a7:4,
						a8:4,
						a9:4,
						a10:4,
						a11:4,
						a12:4,
						a13:4,
						a14:4,
						a15:4,
						a16:4
					}
					
				],
				 options: [
			        {
			          value: "1",
			          label: "总保费"
			        },
			        {
			          value: "2",
			          label: "总收入"
			        },
			        {
			          value: "3",
			          label: "总支出"
			        },
			        {
			          value: "4",
			          label: "利润"
			        },
			        {
			          value: "5",
			          label: "利润率"
			        }
			      ],
			      allSelect:"总保费",
				loadinging: false,
				time1: "",
				InsurancesId: "",
				Insurancelist: [],
				StaffId: "",
				InsuranceStafflist: [{
					describe: "",
					id: "",
					staffAccount: "不限"
				}],
				OrganizationUnitId:"",
				treeData:[],
				 childprops: {
			        name: "displayName", //显示名字
			        children: "orgs", //子级字段名
			        lv: "depth" //当前层级
			      },
			}
		},
		mounted() {
			this.getInsurance()
			this.getUnits()
		},
		methods: {
			 handleCommand(command) {
			 	console.log(command)
		     // this.value5 = command;
		      this.allSelect = this.options[command - 1].label;
		    },
			   renderHeader(h, { column, $index }) {
			      return (
			        <div class="thHead">
			          <span>&nbsp;&nbsp;月份&nbsp;&nbsp;</span>
			          <span>保险公司</span>
			        </div>
			      );
			    },
			//搜索
			searchList(){
				
			},
			   //组织机构
    getUnits() {
      let params = {
        queryType: 1
      };
      this.post(
        params,
        "services/app/common/GetCurrentOrganizationUnitsByType"
      ).then(rs => {
        console.log("组织机构" + rs);
        if (rs.success) {
          let data = rs.result;
          let arr = [];
          arr.push(data);
          this.treeData = arr;
          // console.log(rs.result);
          // console.log(this.treeData);
          // console.log('-----------');
        }
      });
    },
			setSelectedId(){
				
			},
			//保险公司
			getInsurance() {
				let params = {};
				let all = {
					letter: "",
					insurances: [{
						id: "",
						insuranceName: "不限"
					}]
				};
				this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
					if(rs.success) {
						console.log("baoxiangongsi");
						console.log(rs.result.items);
						let result = rs.result.items;
						result.unshift(all);
						this.Insurancelist = result;
					}
				});
			}, //工号
			getInsuranceStaff(val) {
				this.StaffId = "";
				let all = {
					describe: "",
					id: "",
					staffAccount: "不限"
				};
				if(val) {
					let params = {
						id: val
					};

					this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(rs => {
						if(rs.success) {
							let result = rs.result.items;
							console.log("num");
							console.log(result);
							result.unshift(all);
							this.InsuranceStafflist = result;
							for(var i = 0; i < this.InsuranceStafflist.length; i++) {
								if(this.InsuranceStafflist[i].describe) {
									this.InsuranceStafflist[i].staffAccount = this.InsuranceStafflist[i].staffAccount + "（" + this.InsuranceStafflist[i].describe + "）";
								} else {
									this.InsuranceStafflist[i].staffAccount = this.InsuranceStafflist[i].staffAccount;
								}
							}
						}
					});
				} else {
					console.log(222)
					let arr = []
					arr.push(all)
					this.InsuranceStafflist = arr
				}
			},
		}
	}
</script>
<style lang='scss' scoped>
	.content {
		width: 100%;
		padding: 30px 20px;
		.search {
			width: 100%;
			margin-bottom: 30px;
			display: flex;
			justify-content: space-between;
			flex-wrap:wrap;
			.searchone {
				margin-bottom:20px;
				margin-right:10px;
			}
		}
		.tables {
			width: 100%;
			
			.tablein {
				
			}
		}
	}
	.inputwidth{
		width:210px;
	}
	.borders{
		border-left:1px solid red;
	}
</style>